<template>
  <div class="todo-total" v-show="list.length">
    <div class="todo-total-text">
      已完成 {{ completedTotal }} 条，共 {{ list.length }} 条
    </div>
    <el-button
      type="danger"
      size="small"
      v-show="completedTotal"
      @click="handleCleanCompleted"
    >
      清除已完成
    </el-button>
  </div>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'TodoTotal',
  emits: ['onCleanCompleted'],
  setup(props, { emit }) {
    const store = useStore()
    const list = store.state.list
    const completedTotal = computed(() => {
      return list.filter((o) => o.isCompleted).length
    })
    const handleCleanCompleted = () => {
      const complete = list.filter((o) => !o.isCompleted)
      emit('onCleanCompleted', complete)
    }
    return {
      list,
      completedTotal,
      handleCleanCompleted,
    }
  },
})
</script>
<style scoped lang="scss">
.todo-total {
  display: flex;
  justify-content: space-between;
  line-height: 24px;
  &-text {
    font-size: 12px;
    color: #666666;
  }
}
</style>
